<template>

    <section class="container">
   <script charset="utf-8" type="text/javascript" src="https://viptv.gitee.io/cdn/chplayer/chplayer.js" />
      <vueCkplayer ref="player" :width="`300px`" :source="videoUrl" :style="playStyle" />

    <div class="mt20">
      <article class="fl col-12" style="width: 100%" >


        <section class="mr30 mb25">
          <div class="i-box">
            <div>
              <section id="c-i-tabTitle" class="c-infor-tabTitle c-tab-title">
                <a name="c-i" class="current" title="电影详情">电影详情</a>
              </section>
            </div>
            <article class="ml10 mr10 pt20">
              <div>
                <h6 class="c-i-content c-infor-title">
                  <span>电影介绍</span>
                </h6>
                <div class="course-txt-body-wrap">
                  <section class="course-txt-body">
                    <p v-html="movieVo.description">{{movieVo.description}}</p>
                  </section>
                </div>
              </div>
            </article>

            <article class="ml10 mr10  pt20">
              <div>
                <h6 class="c-i-content c-infor-title">
                  <span>剧集列表</span>
                </h6>
                <div class="course-txt-body-wrap">
                  <section class="course-txt-body">
                    <menu id="lh-menu" class="lh-menu mt10 mr10 ">
                      <ul>
                        <!-- 文件目录 -->
                        <li class="lh-menu-stair" v-for="video in movieVo.videoList" :key="video.videoId">

                          <ol class="lh-menu-ol" style="display: block;">
                            <li class="lh-menu-second ml30">
                              <a :href="'/video/'+video.videoId" target="_self">
                                  <span class="fr">
                                    <i class="free-icon vam mr10">免费试听</i>
                                  </span>
                                <em class="lh-menu-i-2 icon16 mr5">&nbsp;</em>{{video.title}}
                              </a>
                            </li>
                          </ol>

                        </li>
                      </ul>
                    </menu>
                  </section>
                </div>
              </div>
            </article>


          </div>
        </section>


      </article>



    </div>

    </section>
   <!-- <button @click="setFull">全屏</button>
    <button @click="play">播放</button>
    <button @click="pause">暂停</button>
    <button @click="setVolume(1)">设置音量</button>
    <button @click="addListenerPlayer()">addListenerPlayer</button>-->


</template>

<script>
  import vueCkplayer from '@/components/player.vue'
  import movieApi from '@/api/movie'
  export default {
    name: 'ckplayerPlugin',
    components: {
      vueCkplayer: vueCkplayer
    },
    data () {
      return {
        videoVo:{},
        movieVo:{},
        videoUrl:"",
        playStyle:{"background":{"backgroundColor":"0x000000","stretched":3,
            "align":"center","vAlign":"middle","spacingLeft": 0,"spacingTop":0,"spacingRight":0,"spacingBottom":0},
          "controlBar":{"align":"left","vAlign":"bottom","width":"100%","height":40,"offsetX":0,"offsetY":-40,
            "hideControlBar":{"hideEnvironment":"all","hideDelayTime":"1000","hideMode":"alpha",
              "hideTweenTime":0.8,"showSimpleSchedule":"all",
              "simpleSchedule":{
              "backgroundImg":"","loadProgressImg":"","playProgressImg":"","width":"100%","align":"left","vAlign":"bottom","offsetX":"0","offsetY":"-2"}},"background":{"backgroundColor":"0xFFFFFF","backgroundImg":"","alpha":1},"button":{"play":{"mouseOut":"","mouseOver":"","width":40,"height":40,"align":"left","vAlign":"top","marginX":0,"marginY":0,"offsetX":0,"offsetY":0,"clickEvent":"actionScript->videoPlay"},"pause":{"mouseOut":"","mouseOver":"","width":40,"height":40,"align":"left","vAlign":"top","marginX":0,"marginY":0,"offsetX":0,"offsetY":0,"clickEvent":"actionScript->videoPause"},"mute":{"mouseOut":"","mouseOver":"","width":40,"height":40,"align":"right","vAlign":"top","marginX":-334,"marginY":0,"offsetX":-284,"offsetY":0,"clickEvent":"actionScript->videoMute"},"escMute":{"mouseOut":"","mouseOver":"","width":40,"height":40,"align":"right","vAlign":"top","marginX":-334,"marginY":0,"offsetX":-284,"offsetY":0,"clickEvent":"actionScript->videoEscMute"},"full":{"mouseOut":"","mouseOver":"","width":40,"height":40,"align":"right","vAlign":"top","marginX":-40,"marginY":0,"offsetX":-40,"offsetY":0,"clickEvent":"actionScript->fullScreen"},"escFull":{"mouseOut":"","mouseOver":"","width":40,"height":40,"align":"right","vAlign":"top","marginX":-40,"marginY":0,"offsetX":-40,"offsetY":0,"clickEvent":"actionScript->quitFullScreen"},"backLive":{"mouseOut":"","mouseOver":"","align":"left","vAlign":"top","marginX":110,"marginY":0,"offsetX":110,"offsetY":7,"clickEvent":"actionScript->backLive"}},
            "definition":{"defaultButton":{"backgroundColor":"","overBackgroundColor":"","backgroundAlpha":1,"border":0,"borderColor":"","radius":3,"width":70,"height":30,"lineHeight":30,"align":"center","size":14,"font":"Microsoft YaHei;微软雅黑","textColor":"0x313131","overTextColor":"0xe67700","bold":false,"alpha":1},"background":{"backgroundColor":"0xFFFFFF","backgroundAlpha":0.8,"border":0,"borderColor":"","radius":10,"paddingLeft":15,"paddingTop":10,"paddingRight":15,"paddingBottom":10,"triangleWidth":15,"triangleHeight":10,"triangleBackgroundColor":"0xFFFFFF","triangleBorder":0,"triangleBorderColor":"0xFFFFFF","triangleAlpha":0.8,"triangleDeviationX":0,"triangleDeviationY":0},"button":{"backgroundColor":"0xFFFFFF","overBackgroundColor":"0x515151","backgroundAlpha":0.8,"border":0,"borderColor":"","radius":6,"width":70,"height":28,"lineHeight":28,"align":"center","size":14,"font":"Microsoft YaHei;微软雅黑","textColor":"0x313131","overTextColor":"0xe67700","bold":false,"alpha":1},
              "buttonHighlight":{"backgroundColor":"0x313131","overBackgroundColor":"0x515151","backgroundAlpha":0.8,"border":0,"borderColor":"","radius":6,"width":70,"height":28,"lineHeight":28,"align":"center","padding":0,"size":14,"font":"Microsoft YaHei;微软雅黑","textColor":"0xFFFFFF","overTextColor":"0xFFFFFF","bold":"false","alpha":1},"separate":{"marginLeft":5,"marginTop":5,"marginRight":5,"marginBottom":5,"color":"0xFFFFFF","alpha":0,"height":1},"defaultButtonCoor":{"align":"right","vAlign":"top","marginX":-110,"marginY":5,"offsetX":-110,"offsetY":5},"backgroundCoor":{"align":"right","vAlign":"bottom","offsetX":-125,"offsetY":-45,"height":true},"backgroundCoorH5":{"align":"right","vAlign":"bottom2","offsetX":-125,"offsetY":45},"event":"click"},"subtitle":{"defaultButton":{"backgroundColor":"","overBackgroundColor":"","backgroundAlpha":1,"border":0,"borderColor":"","radius":3,"width":60,"height":30,"lineHeight":30,"align":"center","size":14,"font":"Microsoft YaHei;微软雅黑","textColor":"0x313131","overTextColor":"0xe67700","bold":false,"alpha":1},"background":{"backgroundColor":"0xFFFFFF","backgroundAlpha":0.8,"border":0,"borderColor":"","radius":10,"paddingLeft":15,"paddingTop":10,"paddingRight":15,"paddingBottom":10,"triangleWidth":15,"triangleHeight":10,"triangleBackgroundColor":"0xFFFFFF","triangleBorder":0,"triangleBorderColor":"0xFFFFFF","triangleAlpha":0.8,"triangleDeviationX":0,"triangleDeviationY":0},"button":{"backgroundColor":"0xFFFFFF","overBackgroundColor":"0x515151","backgroundAlpha":0.8,"border":0,"borderColor":"","radius":6,"width":60,"height":28,"lineHeight":28,"align":"center","size":14,"font":"Microsoft YaHei;微软雅黑","textColor":"0x313131","overTextColor":"0xe67700","bold":false,"alpha":1},"buttonHighlight":{"backgroundColor":"0x313131","overBackgroundColor":"0x515151","backgroundAlpha":0.8,"border":0,"borderColor":"","radius":6,"width":60,"height":28,"lineHeight":28,"align":"center","padding":0,"size":14,"font":"Microsoft YaHei;微软雅黑","textColor":"0xFFFFFF","overTextColor":"0xFFFFFF","bold":"false","alpha":1},"separate":{"marginLeft":5,"marginTop":5,"marginRight":5,"marginBottom":5,"color":"0xFFFFFF","alpha":0,"height":1},"defaultButtonCoor":{"align":"right","vAlign":"top","marginX":-170,"marginY":5,"offsetX":-170,"offsetY":5},
              "backgroundCoor":{"align":"right","vAlign":"bottom","offsetX":-185,"offsetY":-45,"height":true},
              "backgroundCoorH5":{"align":"right","vAlign":"bottom2","offsetX":-185,"offsetY":45},"event":"click"},
            "playbackrate":{"defaultButton":{"backgroundColor":"","overBackgroundColor":"","backgroundAlpha":1,"border":0,"borderColor":"","radius":3,"width":50,"height":30,"lineHeight":30,"align":"center","size":14,"font":"Microsoft YaHei;微软雅黑","textColor":"0x313131","overTextColor":"0xe67700","bold":false,"alpha":1},"background":{"backgroundColor":"0xFFFFFF","backgroundAlpha":0.8,"border":0,"borderColor":"","radius":10,"paddingLeft":15,"paddingTop":10,"paddingRight":15,"paddingBottom":10,"triangleWidth":15,"triangleHeight":10,"triangleBackgroundColor":"0xFFFFFF","triangleBorder":0,"triangleBorderColor":"0xFFFFFF","triangleAlpha":0.8,"triangleDeviationX":0,"triangleDeviationY":0},"button":{"backgroundColor":"0xFFFFFF","overBackgroundColor":"0x515151","backgroundAlpha":0.8,"border":0,"borderColor":"","radius":6,"width":50,"height":28,"lineHeight":28,"align":"center","size":14,"font":"Microsoft YaHei;微软雅黑","textColor":"0x313131","overTextColor":"0xe67700","bold":false,"alpha":1},"buttonHighlight":{"backgroundColor":"0x313131","overBackgroundColor":"0x515151","backgroundAlpha":0.8,"border":0,"borderColor":"","radius":6,"width":50,"height":28,"lineHeight":28,"align":"center","padding":0,"size":14,"font":"Microsoft YaHei;微软雅黑","textColor":"0xFFFFFF","overTextColor":"0xFFFFFF","bold":"false","alpha":1},"separate":{"marginLeft":5,"marginTop":5,"marginRight":5,"marginBottom":5,"color":"0xFFFFFF","alpha":0,"height":1},
              "defaultButtonCoor":{"align":"right","vAlign":"top","marginX":-220,"marginY":5,"offsetX":1000,"offsetY":5},
              "backgroundCoor":{"align":"right","vAlign":"bottom","offsetX":-235,"offsetY":-45,"height":true},
              "backgroundCoorH5":{"align":"right","vAlign":"bottom2","offsetX":-235,"offsetY":45},"event":"click"},
            "volumeSchedule":{"backgroundImg":"","maskImg":"","align":"right","vAlign":"top","width":60,"height":12,"backgroundHeight":12,"marginX":-290,"marginY":14,"offsetX":-240,"offsetY":14,"button":{"mouseOut":"","mouseOver":"","vAlign":"top","width":16,"height":12,"marginX":0,"marginY":0}},"timeSchedule":{"default":{"backgroundImg":"","loadProgressImg":"","playProgressImg":"","width":"100%","height":6,"align":"left","vAlign":"top","marginX":0,"marginY":-6,"offsetX":0,"offsetY":-10},"mouseOut":{"backgroundImg":"","loadProgressImg":"","playProgressImg":"","width":"100%","height":1,"align":"left","vAlign":"top","marginX":0,"marginY":-1,"offsetX":0,"offsetY":-1},"buttonContainer":{"width":"100%","height":14,"align":"left","vAlign":"bottom","offsetX":0,"offsetY":-50},"button":{"mouseOut":"","mouseOver":"","width":18,"height":14},"defaultHideTime":"0.3","defaultShowTime":"0.3","mouseOutHideTime":"0.3","mouseOutShowTime":"0.3"},"timeText":{"vod":{"text":"[$vodLanguage]","align":"left","vAlign":"top","marginX":48,"marginY":7,"offsetX":48,"offsetY":7,"size":14,"font":"Microsoft YaHei;微软雅黑","color":"0x313131","alpha":1,"bold":false,"lineHeight":25},"live":{"text":"[$liveLanguage]","align":"left","vAlign":"top","marginX":48,"marginY":7,"offsetX":48,"offsetY":7,"size":14,"font":"Microsoft YaHei;微软雅黑","color":"0x313131","alpha":1,"bold":false,"lineHeight":25}},"custom":{"button":{},"images":{"definitionSeparator":{"img":"","align":"right","vAlign":"top","marginX":-110,"marginY":0,"offsetX":-110,"offsetY":0,"width":1,"height":40},"subtitleSeparator":{"img":"","align":"right","vAlign":"top","marginX":-170,"marginY":0,"offsetX":-170,"offsetY":0,"width":1,"height":40},"playbackrateSeparator":{"img":"","align":"right","vAlign":"top","marginX":-220,"marginY":0,"offsetX":1000,"offsetY":0,"width":1,"height":40}},"swf":{}}},"centerPlay":{"mouseOut":"","mouseOver":"","width":80,"height":64,"align":"center","vAlign":"middle","offsetX":-40,"offsetY":-32,"clickEvent":"actionScript->videoPlay"},"buffer":{"file":"","align":"center","vAlign":"middle","offsetX":-30,"offsetY":-30,"text":{"align":"center","vAlign":"middle","offsetX":-30,"offsetY":-12,"size":14,"font":"Microsoft YaHei;微软雅黑","color":"0xFFFFFF","alpha":1,"bold":false,"width":60,"textAlign":"center"}},"custom":{"button":"","images":"","swf":""},"error":{"size":14,"font":"Microsoft YaHei;微软雅黑","color":"0xFFFFFF","alpha":1,"bold":false,"width":200,"textAlign":"center","align":"center","vAlign":"middle","marginX":-100,"marginY":-30,"offsetX":-100,"offsetY":0,"lineHeight":30,"height":30},"advertisement":{"background":{"backgroundColor":"0x000000","alpha":1,"width":"100%","height":"100%"},"reserve":{"spacingLeft":30,"spacingTop":0,"spacingRight":30,"spacingBottom":0,"align":"center","vAlign":"middle"},"countDown":{"backgroundColor":"","backgroundImg":"","alpha":1,"radius":0,"height":34,"width":34,"align":"right","vAlign":"top","offsetX":-44,"offsetY":10},"countDownText":{"size":16,"font":"Microsoft YaHei;微软雅黑","color":"0xffffff","alpha":1,"bold":"false","width":25,"textAlign":"center","align":"right","vAlign":"top","height":34,"lineHeight":34,"offsetX":-39,"offsetY":15,"marginY":10},"muteButton":{"mouseOut":"","mouseOver":"","align":"right","vAlign":"top","width":34,"height":34,"offsetX":-85,"offsetY":10,"clickEvent":"actionScript->adMute"},"escMuteButton":{"mouseOut":"","mouseOver":"","align":"right","vAlign":"top","width":34,"height":34,"offsetX":-85,"offsetY":10,"clickEvent":"actionScript->escAdMute"},"skipAdButton":{"mouseOut":"","mouseOver":"","align":"right","vAlign":"top","width":80,"height":34,"offsetX":-173,"offsetY":10,"clickEvent":"javaScript->adjump"},"skipDelay":{"backgroundColor":"","backgroundImg":"","alpha":1,"radius":0,"height":34,"width":139,"align":"right","vAlign":"top","offsetX":-230,"offsetY":10},"skipDelayText":{"size":14,"font":"Microsoft YaHei;微软雅黑","color":"0xFFFFFF","alpha":1,"bold":"false","width":25,"height":34,"lineHeight":34,"textAlign":"right","align":"right","vAlign":"top","offsetX":-222,"offsetY":15,"marginY":10},
            "adLinkButton":{"mouseOut":"","mouseOver":"","align":"right","vAlign":"bottom","width":81,"height":34,"offsetX":-90,"offsetY":-40,"clickEvent":"actionScript->openAdLink"},"closeButton":{"mouseOut":"","mouseOver":"","align":"right","vAlign":"top","width":28,"height":28,"offsetX":-14,"offsetY":-14,"clickEvent":"actionScript->closePauseAd"},"closeOtherButton":{"mouseOut":"","mouseOver":"","align":"right","vAlign":"top","width":34,"height":18,"offsetX":-34,"offsetY":-18}},"video":{"reserve":{"spacingLeft":0,"spacingTop":0,"spacingRight":0,"spacingBottom":0,"stretched":1,"align":"center","vAlign":"middle"},"controlBarHideReserve":{"spacingLeft":0,"spacingTop":0,"spacingRight":0,"spacingBottom":0,"stretched":1,"align":"center","vAlign":"middle"}},"prompt":{"height":25,"lineHeight":25,"size":14,"font":"Microsoft YaHei;微软雅黑","color":"0xFFFFFF","bold":"false","alpha":0.8,"backgroundColor":"0x333333","backgroundAlpha":0.8,"border":0,"borderColor":"0x333333","radius":3,"borderRadius":3,"paddingLeft":15,"paddingTop":2,"paddingRight":15,"paddingBottom":4,"marginBottom":5,"triangleWidth":15,"triangleHeight":10,"triangleBackgroundColor":"0x333333","triangleBorder":0,"triangleBorderColor":"0xFFFFFF","triangleAlpha":0.8,"triangleDeviationX":0,"triangleDeviationY":0},"promptSpot":{"color":"0xFFFFFF","alpha":1,"width":6,"height":6,"radius":6},"promptSpotH5":{"width":6,"height":6,"alpha":1,"backgroundColor":"0xFFFFFF","vAlign":"top","marginY":4,"borderRadius":6},"previewPrompt":{"size":14,"font":"Microsoft YaHei;微软雅黑","color":"0xFFFFFF","lineHeight":25,"bold":false,"alpha":1,"backgroundColor":"0x000000","backgroundAlpha":0,"border":0,"borderColor":"0x333333","radius":0,"paddingLeft":15,"paddingTop":2,"paddingRight":15,"paddingBottom":8,"marginBottom":0,"textWidth":150,"textHeight":0},"preview":{"border":6,"borderColor":"0x004eff","alpha":1,"bottom":50},"cktrack":{"size":16,"font":"Microsoft YaHei;微软雅黑","color":"0xFFFFFF","bold":true,"alpha":1,"leading":30,"marginBottom":50},"png-1-1":""}
         ,
        fileUploadHost:'http://localhost:7070'

      }
    },
    created(){
        this.getVideoById();
    },
    mounted(){
    },
    watch:{
      "$route":{
        handler(route){
            this.getVideoById();
        }
      }
    },
    methods:{
      getVideoById(){
          const videoId = this.$route.params && this.$route.params.videoId;
          movieApi.getMovieVideo(videoId)
            .then(response => {
              this.videoVo=response.data.data.video;
              this.movieVo=response.data.data.movie;
              this.videoUrl = this.fileUploadHost+this.videoVo.url;
              this.player();
          })

      },
      player() {
          this.$nextTick(() => {
            console.log("aaaa",this.$refs.player);
            this.$refs.player.loadPlayer(this.videoUrl);
          });
        // this.$refs.player.play();
      },
      setFull() {
        this.$refs.player.setFull()
      },
      pause(){
        this.$refs.player.pause()
      },

      play(){
        this.$refs.player.play()
      },
      setVolume(vol){
        this.$refs.player.setVolume(vol)
      },
      addListenerPlayer(){
        this.$refs.player.addListenerPlayer()
      }

    }
  }
</script>

<style scoped>



</style>
